<template>
  <div class="wrapper">
    <div class="header-box">
      <header>
        <i class="fa fa-angle-left" onclick="history.go(-1)"></i>
        <p>选择AQI</p>
        <i class="fa fa-th" onclick="location.href='selectGrid.html'"></i>
      </header>
      <div class="top-ban"></div>
    </div>

    <table border="1">
      <tr v-for="aqi in aqiArr" :key="aqi.aqiId">
        <td>{{aqi.chineseExplain}}</td>
        <td>{{aqi.aqiExplain}}</td>
        <td>{{aqi.healthImpact}}</td>
      </tr>
    </table>
    <div class="aqi-box">
      <h4>请预估当前空气质量指数等级：</h4>
      <ul>
        <li v-for="aqi in aqiArr" :key="aqi.aqiId">
          <div :style="{backgroundColor: aqi.color}">{{aqi.chineseExplain}}</div>
          <input type="radio" v-model="aqiId" :value="aqi.aqiId"/>
        </li>
      </ul>
      <h4>请填写反馈信息：</h4>
      <textarea placeholder="请填写反馈信息" v-model="information"></textarea>
      <div class="btn" @click="add">提交</div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSessionStorage, getCurDate, getCurTime } from "../common.js";

const router = useRouter();
const route = useRoute();
const axios = inject("axios");

const aqiArr = ref([]);
const aqiId = ref(0);
const information = ref("");

const supervisor = getSessionStorage('supervisor');

const init = () => {
  axios
    .post("aqi/listAqiAll")
    .then((response) => {
      aqiArr.value = response.data;
      aqiId.value = aqiArr.value[0].aqiId;
    })
    .catch((error) => {
      console.log(error);
    });
};
init();

const add = ()=>{
  if(information.value==''){
    alert("反馈信息不能为空！");
    return;
  }

  let param = {
    telId: supervisor.telId,
    provinceId: route.query.provinceId,
    cityId: route.query.cityId,
    address: route.query.address,
    information: information.value,
    estimatedGrade: aqiId.value,
    afDate: getCurDate(),
    afTime: getCurTime(),
    state: 0
  }

  axios
    .post("aqiFeedback/saveAqiFeedback",param)
    .then((response) => {
      if(response.data==1){
        router.push('/feedbackList');
      }else{
        alert('提交反馈信息失败！');
      }
    })
    .catch((error) => {
      console.log(error);
    });
}
</script>

<style scoped>
/************************ 表格样式 ************************/
table {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border-color: #e4e6e9;
  font-size: 4vw;
  color: #444;
  font-weight: 700;
  margin-top: 6vw;
}
table tr td {
  box-sizing: border-box;
  padding: 1.4vw;
  background-color: #f5f7fa;
}
table tr td:first-child {
  width: 10vw;
  text-align: center;
}
table tr td:last-child {
  background-color: #fff;
  font-weight: 300;
  font-size: 3.6vw;
}
/************************ 预估AQI样式 ************************/
.aqi-box {
  width: 90%;
  margin: 0 auto;
}
.aqi-box h4 {
  color: #444;
  margin: 5vw 0 2vw 0;
}
.aqi-box ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.aqi-box ul li {
  display: flex;
  align-items: center;
}
.aqi-box ul li div {
  box-sizing: border-box;
  padding: 1vw 2vw;
  background-color: red;
  font-size: 3.2vw;
  font-weight: 700;
  border-radius: 1vw;
}
.aqi-box ul li input {
  margin-right: 2vw;
}
.aqi-box textarea {
  width: 100%;
  height: 20vw;
  border: none;
  outline: none;
  border: solid 1px #999;
  border-radius: 2vw;
  box-sizing: border-box;
  padding: 2vw;
}
</style>